块级元素
行内元素
元素之间的转换
logo标签使用h1标签(h1的权重最大)
1.<!-- html5 的 文档声明 -->
2.<!DOCTYPE html>
3.<!-- 根元素lang语言 en英语 ch中文 -->
4.<html lang="en">
5.<!-- 网页的头部 -->
6.<head>
7. <!--
8. mate元信息
9. 编码 UTF-8
10. 网页的关关键字 SEO优化
11. 网页的描述内容
12. 视口 viewport meta: vb tab(移动端手机页面开发必须加的code)
13. -->
14. <meta charset="UTF-8">
15. <!-- 网页的标题 -->
16. <title>01-网页的基本结构</title>
17. <!-- 标题前的小图标 -->
18. <link rel="shortcut icon" type="text/css" href="https://avatars1.githubusercontent.com/u/31435638?s=460&v=4">
19.</head>
20.<!-- 网页的主体 -->
21.<body>
22.
23.</body>
24.</html>
css简介
CSS (层叠样式表) 编辑
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
基础语法
命名规范
1.<div style="width:250px;height:250px"></div>
1.<style>
2. p{
3. width:250px;
4. height:250px;
5. }
6.</style>
标签选择器class(类名)选择器id选择器"*"通配符选择器【box-sizing:border-box;】
width= 内容宽+padding+border
height= 内容高+padding+border
:before和:after1.<body>
2. <div id="box">
3. <p id="box_p">等我嗨死...来。</p>
4. </div>
5.</body>
6.<script>
7. let box_p = document.getElementById("box_p");
8. //在页面中我们添加的 伪类 p:after和p:before是看不到html结构的,
9. //通过window.getComputedStyle(targetElement,'伪劣名').属性名 可以获取到伪类的css属性的值
10.
11.console.log(window.getComputedStyle(box_p,"after").content);//"#box p:after"
12. console.log(window.getComputedStyle(box_p,"before").content);//"#box p:before"
13.</script>